@()(implicit request: play.api.mvc.RequestHeader)
@main("Phylogenetic Tree") {

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("phylotree.js-master/phylotree.css")">
	<script src="@routes.Assets.at("javascripts/d3.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/underscore.min.js")" type="text/javascript"></script>
	@* <script src="@routes.Assets.at("javascripts/d3.v5.js")" type="text/javascript"></script>*@
	<script src="@routes.Assets.at("phylotree.js-master/phylotree.js")" type="text/javascript"></script>

	<style>

			.radio, .checkbox {
				position: relative;
				display: block;
				margin-top: 5px;
				margin-bottom: 10px;
			}

			table img {
				vertical-align: middle;
			}

			table .myImgTd {
				text-align: center;
			}

			.fa-rotate-135 {
				-webkit-transform: rotate(135deg);
				-moz-transform: rotate(135deg);
				-ms-transform: rotate(135deg);
				-o-transform: rotate(135deg);
				transform: rotate(135deg);
			}

			.fa-rotate-45 {
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			.myGroup {
				margin-top: 15px;
				margin-left: 15px;
			}


	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Phylogenetic Tree</h2>
		</div>
	</div>

	<div id="content" style="display: block" >

		<div style="border: 1px solid #ccc;">
			<div>
				<div class="btn-group myGroup">
					<button type="button" class="btn btn-default btn-sm" data-direction="vertical" data-amount="1" title="Expand vertical spacing">
						<i class="fa fa-arrows-v"></i>
					</button>
					<button type="button" class="btn btn-default btn-sm" data-direction="vertical" data-amount="-1" title="Compress vertical spacing">
						<i class="fa  fa-compress fa-rotate-135"></i>
					</button>
					<button id="leftRight" type="button" class="btn btn-default btn-sm" data-direction="horizontal" data-amount="1" title="Expand horizonal spacing">
						<i class="fa fa-arrows-h"></i>
					</button>
					<button type="button" class="btn btn-default btn-sm" data-direction="horizontal" data-amount="-1" title="Compress horizonal spacing">
						<i class="fa  fa-compress fa-rotate-45"></i>
					</button>
					<button type="button" class="btn btn-default btn-sm" id="sort_ascending" title="Sort deepest clades to the bototm">
						<i class="fa fa-sort-amount-asc"></i>
					</button>
					<button type="button" class="btn btn-default btn-sm" id="sort_descending" title="Sort deepsest clades to the top">
						<i class="fa fa-sort-amount-desc"></i>
					</button>
					<button type="button" class="btn btn-default btn-sm" id="sort_original" title="Restore original order">
						<i class="fa fa-sort"></i>
					</button>
				</div>

				<div style="margin-top: 15px" class="btn-group">
					<form class="myForm" action="@routes.TreeController.downloadTree" method="post" style="display: inline">
						<input type="hidden" name="svgHtml" id="svgHtml">
							&nbsp;<button class="btn btn-default btn-sm" type="submit" title="Save image"><i class="fa fa-picture-o"></i></button>
					</form>
				</div>

				<div class="btn-group myGroup" data-toggle="buttons">
					<label class="btn btn-default btn-sm active" id="linear">
						<input name="options" class="phylotree-layout-mode" data-mode="linear" autocomplete="off" checked="" title="Layout left-to-right" type="radio">
						Linear
					</label>
					<label class="btn btn-default  btn-sm">
						<input name="options" class="phylotree-layout-mode" data-mode="radial" autocomplete="off" title="Layout radially" type="radio">
						Radial
					</label>
				</div>
				<div class="btn-group myGroup" data-toggle="buttons">
					<label class="btn btn-default active btn-sm" id="defaultAlign">
						<input class="phylotree-align-toggler" data-align="left" name="options-align" autocomplete="off" checked="" title="Align tips labels to branches" type="radio">
						<i class="fa fa-align-left"></i>
					</label>
					<label class="btn btn-default btn-sm">
						<input class="phylotree-align-toggler" data-align="right" name="options-align" autocomplete="off" title="Align tips labels to the edge of the plot" type="radio">
						<i class="fa fa-align-right"></i>

					</label>
				</div>
			</div>

			<svg id="tree_container" class="tree-widget" style="width: 100%" xmlns='http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
		</div>

	</div>


	<script>



			$(function () {

				PhyTree.init

			})
	</script>


}
